import React, { Component } from 'react'
import { NavBar, InputItem, Button,Toast } from 'antd-mobile';
import { Link } from "react-router-dom"
import { reqLogin, reqRegister } from '../../http/api';
export default class Login extends Component {
    constructor() {
        super()
        this.state = {
            user: {
                phone: "",
                password: "",
                nickname:""
            }
        }
    }
    // 数据绑定
    changeUser(value, key) {
        this.setState({
            user: {
                ...this.state.user,
                [key]: value
            }
        })
    }
    register() {
        reqRegister(this.state.user).then(res => {
            console.log(res);
            if(res.data.code==200){
                // 弹成功
                Toast.success(res.data.msg,1)
                // 跳转页面
                this.props.history.push('/login')
            }
        })
    }
    render() {
        let { user } = this.state;
        return (

            <div className="nav">

                <NavBar>登录</NavBar>
                <InputItem
                    clear
                    placeholder="请输入账号"
                    value={user.phone} onChange={(value) => this.changeUser(value, "phone")}

                >手机号</InputItem>
                <InputItem
                    clear
                    placeholder="请输入昵称"
                    value={user.nickname} onChange={(value) => this.changeUser(value, "nickname")}

                >昵称</InputItem>
                <InputItem
                    clear
                    placeholder="请输入密码"
                    type="password"
                    value={user.password} onChange={(value) => this.changeUser(value, "password")}

                >密码</InputItem>
                <div style={{ width: "33.33%", margin: "10px auto" }}>
                    <Button type="primary" onClick={() => this.register()}>注册</Button></div>
                    <Link to="/login">已有账号，去登录</Link> 
            </div>
        )
    }
}
